<template>
	<view class="box">
		<image class="banner" src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/b1.png"
			mode="widthFix"></image>

		<view class="list">
			<view :class="['list-item', current == index ? 'current' : '']" v-for="(item, index) in list" :key="index"
				@click="onPlayBtnClick(item, index)">
				<view class="name">{{ item.name }}</view>
				<view class="btn">点击去听</view>
			</view>
		</view>
		<view class="footer" style="magrin-right:3%">
			<slider @change="onChange" bindtouchstart="" bindtouchend="" min="0" :value="play.percent"></slider>
			<view class="flex flex-js-sb">
				<text>{{play.currentTime}}</text>
				<text>{{play.duration}}</text>
			</view>
			<view class="btn-list">
				<image class="prev-btn" @click="handlePrev"
					src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/play/prev-btn.png"></image>
				<view>
					<image class="play-btn" v-if="!playing" @click="handleStart"
						src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/play/play-btn.png">
					</image>
					<image class="play-btn" v-else @click="handlePause"
						src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/play/pause-btn.png">
					</image>
				</view>
				<image class="next-btn" @click="handleNext"
					src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/play/next-btn.png"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad, onHide, onUnload } from '@dcloudio/uni-app'
	import { useWebsocket } from '@/hooks'
	const { handleCloseVideo } = useWebsocket()
	let music = uni.createInnerAudioContext()
	const current = ref(null)
	const playing = ref(false)
	const play = ref({
		currentTime: '00:00',
		duration: '00:00',
	})
	const playNormal = ref({
		currentTime: 0,
		duration: 0
	})
	const list = [
		{
			name: 'Main Scene',
			path: 'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/MainScene.mp3',
		},
		{
			name: 'Lesson 1',
			path: 'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/Lesson1.mp3',
		},
		{
			name: 'Lesson 2',
			path: 'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/Lesson2.mp3',
		},
		{
			name: 'Lesson 3',
			path: 'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/Lesson3.mp3',
		},
		{
			name: 'Story Time',
			path: 'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/StoryTime.mp3',
		},
	]

	onLoad(() => {
		// handlePlayVideo(list[0].path)
	})
	onHide(() => {
		music.stop()
	})
	onUnload(() => {
		music.stop()
		handleCloseVideo()
	})
	const formatTime = (time) => {
		var minute = Math.floor(time / 60) % 60;
		var second = Math.floor(time) % 60
		return (minute < 10 ? ' 0 ' + minute : minute) + ' : ' + (second < 10 ? ' 0 ' + second : second)
	}
	const onPlayBtnClick = (item, index) => {
		current.value = index
		play.value.percent = 0
		handlePlay(item)
		// handlePlayVideo(item.path)
		// let audioCtx = uni.createmusic()
		//播放失败检测
	}
	const handlePause = () => {
		music.pause()
		playing.value = false
	}
	const handleStart = () => {
		 music.play();
		playing.value = true
	}
	const handlePlay = (item) => {
		music.onError(function () {
			console.log('播放失败' + music.src)
		})
		//自动更新播放进度
		music.src = item.path
		// music.play() //执行播放
		music.onCanplay(() => {
		  music.play();
		});
		music.seek(0)
		music.onPlay(() => {
			console.log('开始播放')
			playing.value = true
			// playing.value = true
		})
		music.onTimeUpdate(() => {
			console.log(formatTime(music.duration),formatTime(music.currentTime))
			play.value.duration = formatTime(music.duration)
			play.value.currentTime = formatTime(music.currentTime)
			play.value.percent = music.currentTime / music.duration * 100
			playNormal.value = {
				currentTime: music.currentTime,
				duration: music.duration,
				percent: music.currentTime / music.duration,
			}
		})
		music.onEnded(() => {
			//播放结束
			music.stop()
			playing.value = false
			play.value.percent = 0
			music.destroy()
			music = uni.createInnerAudioContext()
		})
	}
	const handlePrev = () => {
			music.stop()
			music.destroy()
			music = uni.createInnerAudioContext()
			play.value.percent = 0
		if (current.value == 0) {
			current.value = list.length - 1
			handlePlay(list[list.length])
		} else {
			current.value = current.value - 1
			handlePlay(list[current.value])
		}
	}
	const handleNext = () => {
			music.stop()
			music.destroy()
			music = uni.createInnerAudioContext()
			play.value.percent = 0
		if (current.value == list.length - 1) {
			handlePlay(list[0])
			current.value = 0
		} else {
			current.value = current.value + 1
			handlePlay(list[current.value])
		}
	}
	const onChange = (e) => {
		play.value.percent =  e.detail.value
		let seek = playNormal.value.duration * e.detail.value / 100
		music.seek(seek) //执行播放
		music.play();
		// music.onCanplay(() => {
		//   music.play();
		// });
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		padding: 30rpx 3%;
	}

	.banner {
		width: 100%;
	}

	.list {
		width: 100%;
		margin-top: 30rpx;

		.list-item {
			align-items: center;
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0 3%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #ffeec7;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			color: #fff;

			.name {
				color: #000;
				font-weight: bold;
				font-size: 28rpx;
			}

			.btn {
				width: 120rpx;
				padding: 0 16rpx;
				border-radius: 20rpx;
				color: #000;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #fcca00;
				font-size: 22rpx;
			}
		}

		.current {
			border: 2rpx solid #6260eb;
		}
	}

	.btn-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 220rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}

		.play-btn {
			width:110rpx;
			height: 110rpx;
		}
	}
	.footer{
		position: fixed;
		bottom: 40rpx;
		width: 94%;
	}
</style>